<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="pd-30" v-if="Object.keys(detail).length > 0">
			<template v-if="!sub_id">
				<view class="flex-bwt">
					<view class="xiaq flex-center ft" @click="goOrder(detail.order_id)">{{ "订单详情" }}</view>
					<view class="ft">{{ "订单号：" + detail.ordernum }}</view>
				</view>
				<view class="ft mt-30 flex-center">
					<view class="ft fw-800 c-33">{{ (detail.is_group == 1 ? '拼团' : '') + "支付剩余时间：" }}</view>
					<!-- <template v-if="detail.countdown.d > 0">
						<view class="time-txt">{{ detail.countdown.d }}天</view>
						<view class="time-i">:</view>
					</template>
					<view class="time-txt">{{ detail.countdown.h }}</view>
					<view class="time-i">:</view>
					<view class="time-txt">{{ detail.countdown.m }}</view>
					<view class="time-i">:</view>
					<view class="time-txt">{{ detail.countdown.s }}</view> -->
					<comTimeOut :size="20" :time="detail.pay_countdown_time"></comTimeOut>
				</view>
				<view class="mt-20 flex-center">
					<text class="ft1">￥</text>
					<view class="ft-num ft-68">{{ detail.price }}</view>
				</view>
				<view class="ft-num ft-32 flex-center ft-hen c-99" v-if="detail.coupon_price_show">
					{{ "￥" + detail.coupon_price_show }}
				</view>
				<view class="card_1 mt-20 pd-20">
					<view class="flex-bwt">
						<text class="ft1">{{ "支付方式" }}</text>
						<view class="flex" v-if="detail.is_can_bank_pay == 1">
							<text class="ft c-99">{{ "支付方式说明" }}</text>
							<image class="wh-22 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/illus.png">
							</image>
						</view>
					</view>
					<view class="item pd-20 mt-20 flex-bwt" @click="payType = 1" v-if="detail.is_can_bank_pay == 1">
						<view>
							<text class="ft fw-800 c-33">{{ "自行银行转账" }}</text><text class="ft c-99">{{ "（不限额推荐）"
							}}</text>
						</view>
						<image style="width: 30rpx;height: 30rpx;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/check.png" v-if="payType == 1"></image>
						<image style="width: 30rpx;height: 30rpx;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/un_check.png" v-if="payType != 1">
						</image>
					</view>
					<view class="item pd-20 mt-20 flex-bwt" @click="payType = 2">
						<view>
							<text class="ft fw-800 c-33">{{ "在线支付" }}</text><text class="ft c-99">{{ "（单日限额20000）"
							}}</text>
						</view>
						<template v-if="detail.is_can_bank_pay == 1">
							<image style="width: 30rpx;height: 30rpx;"
								src="https://cdn.oss.bon-top.cn/static_bc/images/check.png" v-if="payType == 2"></image>
							<image style="width: 30rpx;height: 30rpx;"
								src="https://cdn.oss.bon-top.cn/static_bc/images/un_check.png" v-if="payType != 2">
							</image>
						</template>
					</view>
				</view>
				<view class="card_3 mt-20 pd-20" v-if="payType == 2">
					<view class="ft1">{{ "选择支付" }}</view>
					<view class="item pd-20 mt-20 flex-bwt">
						<view class="flex">
							<image class="wh-32 mr-8" src="https://cdn.oss.bon-top.cn/static_bc/images/wx_pay.png">
							</image>
							<text class="ft fw-800 c-33">{{ "微信支付" }}</text><text class="ft c-99">{{ "（默认）" }}</text>
						</view>
						<image style="width: 30rpx;height: 30rpx;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/check.png"></image>
					</view>
					<!--      <view class="item pd-20 mt-20 flex-bwt">
				  <view class="flex"
				    ><image
				      class="wh-32 mr-8"
				      src="https://cdn.oss.bon-top.cn/static_bc/images/cloud_pay.png"
				    ></image>
				    <text class="ft fw-800 c-33">{{ "云闪付" }}</text></view>
				
				</view> -->
				</view>
				<view class="null" style="height: 208rpx" v-if="payType == 2"></view>
				<view class="bottom" v-if="payType == 2">
					<view class="btn flex-center ft c-dbf" @click="submitPay">
						立即支付</view>
				</view>
			</template>
			<template v-if="payType == 1">

				<view class="card_4 mt-20 pd-20" v-if="!sub_id">
					<view class="ft1">支付流程</view>
					<view class="box2 pd-10 mt-20">
						<up-steps current="4" activeColor="#333333" dot direction="column">
							<up-steps-item>
								<template #desc>
									<view class="flex">
										<view class="c-bbq ft fw-800 mr-20">01</view>
										<view class="ft c-99">{{
											"深圳福田]快件已发往[深圳福田]"
										}}</view>
									</view>
								</template>
							</up-steps-item>
							<up-steps-item>
								<template #desc>
									<view class="flex">
										<view class="c-bbq ft fw-800 mr-20">02</view>
										<view class="ft c-99">{{
											"转帐完成后，在下方将转账流水截图或手写提交。"
										}}</view>
									</view>
								</template>
							</up-steps-item>
							<up-steps-item>
								<template #desc>
									<view class="flex">
										<view class="c-bbq ft fw-800 mr-20">03</view>
										<view class="ft c-99">{{
											"客服核销（4小时内完成），遇节假日有可能会延时处理。"
										}}</view>
									</view>
								</template>
							</up-steps-item>
							<up-steps-item>
								<template #desc>
									<view class="flex">
										<view class="c-bbq ft fw-800 mr-20">04</view>
										<view class="ft c-99">{{ "支付核销完成。" }}</view>
									</view>
								</template>
							</up-steps-item>
						</up-steps>
					</view>
					<view class="ft c-99 mt-20">{{
						"温馨提示：此页面若切换或关闭后，可在（我的-我的订单-订单详情-支付），中再次打开。"
					}}</view>
				</view>
				<view class="card_5 pd-20" :class="{ 'mt-20': !sub_id }">
					<view class="ft1">转账信息提交</view>
					<view class="box1 flex-bwt pd-20 mt-20">
						<view><text class="ft ft-20 c-red">*</text><text class="ft c-33">{{ "选择支付到平台银行账号" }}</text>
						</view>
					</view>
					<view class="box3" v-if="detail?.platform_bank_list?.length > 0">
						<view class="box3_bank" v-for="(item, index) in detail.platform_bank_list" :key="index">
							<view class="" @click="setBankMsg(item.id, item.bank_num)">
								<!--银行卡展示 -->
								<view class="bank_box flex-bwt">
									<view class="flex">
										<image class="wh-44 mr-20" :src="item?.bank_type?.logo">
										</image>
										<view>
											<view class="ft fw-800">{{ item.bank_type?.name }}</view>
											<view class="ft c-66 mt-10">{{ item.bank_num }}</view>
										</view>
									</view>
									<image style="width: 30rpx;height: 30rpx;"
										src="https://cdn.oss.bon-top.cn/static_bc/images/check.png"
										v-if="user_bank_id == item.id">
									</image>
									<image style="width: 30rpx;height: 30rpx;"
										src="https://cdn.oss.bon-top.cn/static_bc/images/un_check.png"
										v-if="user_bank_id != item.id">
									</image>
								</view>
								<!-- 银行卡的基本信息 -->
								<view class="info mt-20 pd-20" style="padding-left: 0;padding-right: 0;"
									v-if="item.showMsg">
									<view class="list flex ft c-66">
										{{ "银行名称：" + item.bank_type?.name }}
										<up-copy :content="item.bank_type?.name">
											<text class="ft ml-8 pd-8 c-66 copy">复制</text>
										</up-copy>
									</view>
									<view class="list flex ft c-66" v-if="item.bank_branch">
										{{ "开户支行：" + item.bank_branch }}
										<up-copy :content="item.bank_branch">
											<text class="ft ml-8 pd-8 c-66 copy">复制</text>
										</up-copy>
									</view>
									<view class="list flex ft mt-10 c-66">{{ "开户人：" + item.name }}<up-copy
											:content="item.name">
											<text class="ft ml-8 pd-8 c-66 copy">复制</text>
										</up-copy></view>
									<view class="list flex ft mt-10 c-66">{{ "开户账号：" + item.bank_num }}
										<up-copy :content="item.bank_num">
											<text class="ft ml-8 pd-8 c-66 copy">复制</text>
										</up-copy>
									</view>
								</view>

							</view>
							<view class="line mt-20 ml-48" style="margin-bottom: 20rpx;"
								v-if="index < detail?.user_bank_list?.length - 1">
							</view>
						</view>
					</view>
					<view class="box1 pd-20 mt-20">
						<text class="ft ft-20 c-red">*</text><text class="ft c-33">{{ "输入转账流水单号，或上传截图" }}</text>
					</view>
					<view class="cont pd-20">
						<view class="flex-bwt" @click="goTransferInfo" v-if="!trade_no">
							<text class="ft c-99">{{ "请输入转账流水账号" }}</text>
							<image class="w-20h-34" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
							</image>
						</view>
						<view class="flex-bwt" @click="goTransferInfo" v-if="trade_no" style="align-items: flex-start;">
							<text class="ft c-66" style="max-width: 400rpx;word-break: break-word;">{{ trade_no
							}}</text>
							<view class="flex">
								<text class="ft c-99">修改</text>
								<image style="width: 22rpx;height: 22rpx;margin-left: 4rpx;"
									src="https://cdn.oss.bon-top.cn/static_bc/images/edit_no.png"></image>
							</view>
						</view>
						<!-- <view class="mt-20 flex-bwt">
			              <view class="imgList flex">11</view>
			              <view class="upload">
			                <image
			      class="wh-100"
			      src="https://cdn.oss.bon-top.cn/static_bc/images/upload.png"
			    ></image>  
			              </view>
			          </view> -->
						<view class="mt-20">
							<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="3"
								multiple :maxCount="5" :previewFullImage="true"></up-upload>
						</view>
					</view>
					<view class="note mt-20 pd-20" @click="goTransferNote">
						<view class="flex-bwt">
							<view><text class="ft c-66">备注</text><text class="ft c-99">（非必填）</text></view>
							<view class="flex" v-if="remark">
								<text class="ft c-99">修改</text>
								<image style="width: 22rpx;height: 22rpx;margin-left: 4rpx;"
									src="https://cdn.oss.bon-top.cn/static_bc/images/edit_no.png"></image>
							</view>
						</view>
						<view class="ft c-66 mt-20" v-if="remark" style="word-break: break-word;">{{ remark }}</view>
						<view class="mt-10 flex-bwt" v-if="!remark">
							<view class="ft c-99">请输入</view>
							<image class="w-20h-34" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
							</image>
						</view>
					</view>
				</view>
				<view class="null" style="height: 208rpx"></view>
				<view class="bottom" v-if="!sub_id">
					<view class="btn flex-center ft c-dbf" @click="submit">
						转账后输入信息提交</view>
					<view class="mt-10 ft c-99 ft-22 flex-center">{{
						"转帐完成后请及时（订单详情-支付）提交转帐信息"
					}}</view>
				</view>
				<view class="bottom" v-else>
					<view class="flex-bwt">
						<view class="btn1 flex-c-center" @click="changeOrder('delete')">
							删除
						</view>
						<view class="btn1 active flex-c-center" @click="submit">
							保存修改
						</view>
					</view>
				</view>
			</template>


			<!-- <view class="mask" v-if="showO"></view>
			<view class="offers" v-if="showO">
				<image class="popup-close wh-36" @click="closeO"
					src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png">
				</image>
				<view class="ft-32 ft1">选择到账银行卡</view>
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="bank-item flex mt-20 pd-20" v-for="item in detail.user_bank_list" :key="item.id"
						@click="checkBank(item)">
						<view class="l flex-center mr-20">
							<image :src="item.bank_type.logo" class="logo" mode="widthFix"></image>
						</view>
						<view class="r">
							<view class="ft fw-800">{{ item.bank_type.name }} {{ item.bank_num }}</view>
							<view class="ft-24 c-99 mt-10">48小时内到账</view>
						</view>
					</view>


					<view class="flex-center add pd-20 mt-20" @click="goAddBank">
						<image src="https://cdn.oss.bon-top.cn/static_bc/images/add_icon1.png" class="wh-32 mr-10"
							mode="widthFix">
						</image>
						<view class="ft">添加银行卡，微信，支付宝</view>
					</view>
				</scroll-view>
			</view> -->

		</view>
	</view>


	<!-- <dialogPop ref="diaLogPop" :option="option" @confirm='confirm' @cancel='cancel'></dialogPop> -->
	<dialogPop ref="diaLogPop" :show="showModal" title="删除" :content='option.html' @confirm='confirm' @cancel='cancel'>
	</dialogPop>
</template>

<script setup lang="js">
import {
	onLoad,
	onShow
} from '@dcloudio/uni-app'
import {
	ref,
	reactive
} from 'vue';
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import dialogPop from '@/components/dialogPop.vue';
import comTimeOut from '@/components/comTimeOut.vue'

import navHead from '@/components/navHead.vue';
const headData = reactive({
	color: '#fff',
	title: '白菜拼团收银台'
})

const option = reactive({
	html: `删除后，您当前期款提交的支付将作废，状态变更为<text class="ft-24 c-33 fw-800">“待支付”</text>，在支付列表中重新进行支付。`,
	title: '确定要删除支付信息吗',
})
const showModal = ref(false)

// 弹窗取消时处理逻辑
const cancel = () => {
	console.log('取消取消')
	showModal.value = false

}
// 弹窗删除提交
const confirm = () => {
	showModal.value = false

	if (handCode.value == 'delete') {
		utils
			.request(
				api.deleteOrderPay, {
				sub_id: sub_id.value
			},
				"post"
			)
			.then((res) => {
				uni.navigateBack()
			});
	}
}
// 打开弹窗
const diaLogPop = ref('diaLogPop')
const handCode = ref('')
const changeOrder = (code) => {
	// if (code == 'delete') {
	// 	option.html = '删除'
	// 	option.title = '确定要删除吗？'
	// }
	showModal.value = true

	handCode.value = code
}

const payType = ref(0)
const platform_bank_id = ref("")
const user_bank_id = ref("")
const trade_no = ref("")
const remark = ref("")


// 使用 reactive 创建响应式对象
const timeData = ref({});

// 定义 onChange 方法
const onChange = (e) => {
	timeData.value = e;
};

const goTransferInfo = () => {
	uni.navigateTo({
		url: '/subpackage/joinGroup/transferInfo',
		events: {
			// 监听子页面事件
			fromDetail: (data) => {
				trade_no.value = data.trade_no
			}
		},
		success: (res) => {
			// 向子页面传递数据
			res.eventChannel.emit('toDetail', {
				trade_no: trade_no.value
			});
		}
	})
}

const goTransferNote = () => {
	uni.navigateTo({
		url: '/subpackage/joinGroup/transferNote',
		events: {
			// 监听子页面事件
			fromDetail: (data) => {
				remark.value = data.remark
			}
		},
		success: (res) => {
			// 向子页面传递数据
			res.eventChannel.emit('toDetail', {
				remark: remark.value
			});
		}
	})
}

const fileList1 = ref([]);
// 删除图片
const deletePic = (event) => {
	fileList1.value.splice(event.index, 1);
};

// 新增图片
const afterRead = async (event) => {
	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	let lists = [].concat(event.file);
	let fileListLen = fileList1.value.length;
	lists.map((item) => {
		fileList1.value.push({
			...item,
			status: 'uploading',
			message: '上传中',
		});
	});
	for (let i = 0; i < lists.length; i++) {
		const result = await uploadFilePromise(lists[i].url);
		let item = fileList1.value[fileListLen];
		fileList1.value.splice(fileListLen, 1, {
			...item,
			status: 'success',
			message: '',
			url: result,
		});
		fileListLen++;
	}
};

const uploadFilePromise = (url) => {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: utils.domain + '/api/v1/button.uploadImage',
			filePath: url,
			name: 'image',
			fileType: 'image',

			formData: {
				app_id: utils.app_id,
				identity: utils.identity,
			},
			header: {
				// 'content-type': 'multipart/form-data',
				'Authorization': utils.getToken()
			},
			success: (res) => {
				const resData = JSON.parse(res.data)
				setTimeout(() => {
					resolve(resData.data.info.url);
				}, 1000);
			},
		});
	});
};
const setBankMsg = (id, bankNum) => {
	user_bank_id.value = id
	// platform_bank_id.value = id
	platform_bank_id.value = id
	detail.value?.platform_bank_list.forEach(f => {
		f.showMsg = false
		if (f.id == user_bank_id.value) f.showMsg = true

	});
}
const submit = () => {
	const formData = {}
	formData.order_id = order_id.value
	formData.sub_id = sub_id.value
	formData.platform_bank_id = platform_bank_id.value
	// formData.user_bank_id = user_bank_id.value
	formData.trade_no = trade_no.value
	formData.images = fileList1.value.map(item => {
		return item.url
	})
	formData.remark = remark.value
	console.log('执行了', formData)

	utils
		.request(
			api.subOrderPayData, formData,
			"post"
		)
		.then((res) => {
			console.log('res',res)
			uni.redirectTo({
				url: '/subpackage/joinGroup/submitResult?sub_id=' + res.data.id
			})
		});
}

const submitPay = () => {
	//获取在线支付包
	const formData = {}
	formData.order_id = order_id.value
	formData.openid = uni.getStorageSync("openid")
	utils
		.request(
			api.getOnlineOrderPayPackage, formData,
			"post"
		)
		.then((res) => {
			//调起支付
			uni.requestPayment({
				...res.data.info.package, success(result) {
					// 支付成功 执行订阅流程
					if (!isSettings.value) {
						handleSubscribeMessage(res.data.info.pay_id)
					} else {
						uni.redirectTo({
							url: '/subpackage/joinGroup/waitPay?order_id=' + order_id.value + '&pay_id=' + res.data.info.pay_id
						})
					}



				}
			})
		});
}

const handleSubscribeMessage = (id) => {
	wx.requestSubscribeMessage({
		tmplIds: ['x5BupXgBfgsOSoZOeo-2bfvhQhEn6GV2G1mPcw7fQ5c'],
		success(res) {
			utils.subscribeMessage(res)
		},
		complete(res) {
			uni.redirectTo({
				url: '/subpackage/joinGroup/waitPay?order_id=' + order_id.value + '&pay_id=' + id
			})
		}
	})
}
const order_id = ref('')
const sub_id = ref('')
const detail = ref({})
const paymentType = ref('')
const isSettings = ref(false)
onLoad((options) => {
	if (options.order_id) {
		order_id.value = options.order_id;

		sub_id.value = options.sub_id ? options.sub_id : '';
		reloadData()
	}

	wx.getSetting({
		withSubscriptions: true,

		success(res) {
			if (res.subscriptionsSetting.itemSettings) {

				// isSettings.value = ['x5BupXgBfgsOSoZOeo-2bfvhQhEn6GV2G1mPcw7fQ5c'].some(f => res.subscriptionsSetting.itemSettings[f])
				//核销成功通知
				if (res.subscriptionsSetting.itemSettings['x5BupXgBfgsOSoZOeo-2bfvhQhEn6GV2G1mPcw7fQ5c']) isSettings.value = true
			}
		}
	})
})

const reloadData = () => {
	utils
		.request(
			api.getOrderPayDetail, {
			order_id: order_id.value,
		},
			"get"
		)
		.then((res) => {
			detail.value = res.data.info;
			user_bank_id.value = detail.value.platform_bank_list[0].id
			platform_bank_id.value = user_bank_id.value
			detail.value?.platform_bank_list.forEach(f => {
				f.showMsg = false
				if (f.id == user_bank_id.value) f.showMsg = true

			});
			if (detail.value.is_can_bank_pay == 1) {
				payType.value = 1
			} else {
				payType.value = 2
			}
		});

	if (sub_id.value) {
		utils
			.request(
				api.getSubOrderPayData, {
				sub_id: sub_id.value
			},
				"get"
			)
			.then((res) => {
				const resData = res.data.info.sub_info

				// user_bank_id.value = resData.user_bank_id
				platform_bank_id.value = resData.platform_bank_id
				trade_no.value = resData.trade_no
				remark.value = resData.remark
				fileList1.value = resData.images.map(item => {
					return {
						url: item
					}
				})

			});
	}
}

const goOrder = (id) => {
	uni.navigateTo({
		url: "/subpackage/orderList/orderDetail?id=" + id,
	});
}


const showO = ref(false)
const closeO = () => {
	showO.value = false
}
const goAddBank = () => {
	uni.navigateTo({
		url: '/subpackage/bank/editBank',
	});
}

const checkBank = (item) => {
	user_bank_id.value = item.id
	showO.value = false
}

// 页面显示时检测刷新标记
onShow(() => {
	const app = getApp();
	if (app.globalData.shouldRefresh) {
		reloadData()
		app.globalData.shouldRefresh = false;
	}
})
</script>

<style lang="scss" scoped>
.xiaq {
	width: 136rpx;
	height: 58rpx;
	background: #f8f8f8;
	border-radius: 34rpx 34rpx 34rpx 34rpx;
}

.time-txt {
	background: #9C0000;
	border-radius: 8rpx;
	padding: 2rpx 6rpx;
	font-weight: 800;
	font-size: 20rpx;
	color: #FFFFFF;
}

.time-i {
	margin-left: 2rpx;
	margin-right: 2rpx;
	font-weight: 800;
	font-size: 24rpx;
	color: #333333;
}

.time {
	@include flex;
	align-items: center;

	&__custom {
		margin-top: 4px;
		width: 22px;
		height: 22px;
		background-color: #9c0000;
		border-radius: 4px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;

		&__item {
			color: #fff;
			font-size: 12px;
			text-align: center;
		}
	}

	&__doc {
		color: #9c0000;
		padding: 0px 4px;
	}

	&__item {
		color: #606266;
		font-size: 15px;
		margin-right: 4px;
	}
}

.card_1 {
	width: 690rpx;
	// height: 268rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.item {
		width: 650rpx;
		height: 74rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.card_3 {
	width: 690rpx;
	// height: 268rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.item {
		width: 650rpx;
		height: 74rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.card_2 {
	width: 690rpx;
	// height: 430rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.box {
		width: 650rpx;
		height: 236rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.box1 {
		width: 650rpx;
		//height: 74rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.info {
			width: 610rpx;
			border-top: 2rpx #f8f8f8 solid;

			.copy {
				display: inline-block;
				font-size: 20rpx;
				color: #666666;
				background: #f1f1f1;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}
	}
}

.card_4 {
	width: 690rpx;
	// height: 488rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.box2 {
		width: 650rpx;
		// height: 304rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.card_5 {
	width: 690rpx;
	//height: 900rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.box1 {
		width: 650rpx;
		// height: 74rpx;
		background: linear-gradient(180deg,
				#ffffff 0%,
				rgba(255, 255, 255, 0) 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.cont {
		width: 650rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

	}

	.note {
		width: 650rpx;
		height: 128rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.box3 {
		// width: 650rpx;

		// height: 236rpx;
		// background: #ffffff;
		// border-radius: 20rpx 20rpx 20rpx 20rpx;
		// background: red;
		.box3_bank {
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;
		}


		.info {
			width: 610rpx;
			border-top: 2rpx #f8f8f8 solid;
			// border-top: 2rpx solid #f1f1f1;


			.copy {
				display: inline-block;
				font-size: 20rpx;
				color: #666666;
				background: #f1f1f1;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}

		.line {
			width: 526rpx;
			height: 0rpx;
			border-top: 2rpx solid #f1f1f1;
		}
	}
}

.bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	background: #f8f8f8;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	padding: 10rpx 30rpx 10rpx;
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;

	.btn {
		width: 690rpx;
		height: 78rpx;
		background: #333333;
		border-radius: 20rpx;
	}

	.btn1 {
		width: 196rpx;
		height: 78rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.active {
		width: 454rpx;
		height: 78rpx;
		background: #333333;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #DBF046;
	}
}


.mask {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 998;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.4);
}

.offers {
	position: fixed;
	bottom: 0;
	left: 0;
	box-shadow: 0rpx 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	z-index: 999;
	width: 100vw;
	height: 50vh;
	background: #f8f8f8;
	//border: 2rpx solid red;
	// position: relative;
	padding: 40rpx;
	box-sizing: border-box;
	padding-bottom: calc(44rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(44rpx + env(safe-area-inset-bottom));

	.popup-close {
		position: absolute;
		top: 44rpx;
		right: 44rpx;
	}

	.scroll-Y {
		height: calc(100% - 104rpx + env(safe-area-inset-bottom));
		padding-top: 20rpx;
	}

	.bank-item {
		background: #FFFFFF;
		border-radius: 20rpx;

		.l {
			width: 80rpx;
			height: 80rpx;
			background: #F8F8F8;
			flex-shrink: 0;
			border-radius: 50%;

			.logo {
				width: 55rpx;
				height: 55rpx;
			}
		}
	}

	.add {
		background: #F1F1F1;
		border-radius: 20rpx;
	}
}
</style>